{% assign data = section.settings %}
{% capture container %}
    {%- if data.is_fill -%}
        full_container_wrapper
    {%- else -%}
        container_wrapper
    {%- endif -%}
{% endcapture %}

{% assign blockId = block_id | default: section.block_id %}

<div class="block_image_text_list">
  <div class="{{ container }}">
    {% assign more_href = data.more_link | setUrlDataFrom:data_from %}
    {% include 'title',title: data.block_title,detail: data.block_detail,class: 'title_line',more_text: data.more_text, more_href: more_href %}
    <div class="swiper overflow-hidden relative" style="--pc" id="swiper-{{ blockId }}">
      <ul class="swiper-wrapper text-center" style="--pc-number: {{data.pc_number}};">
        {% for block in section.blocks %}
          <li class="swiper-slide">
            <div class="img_box overflow-hidden">
              <a href="{{ block.link | setUrlDataFrom:data_from }}">
                {% include 'lazy_img', src: block.image.src, alt: block.image.alt, class: 'w-full object-cover' %}
              </a>
            </div>
            <div class="text_box">
              {% if block.title != '' %}
                <h2 class="item_title mt-[22px] mb-[10px]">
                  <a class="public_title" href="{{ block.link | setUrlDataFrom:data_from }}">{{ block.title }}</a>
                </h2>
              {% endif %}
              {% if block.detail != '' %}
                <div class="item_detail">{{ block.detail|html_content_filter }}</div>
              {% endif %}
              {% if block.btn_text != '' %}
                <div class="btn_wrap mt-[30px]">
                  <a class="public_btn" href="{{ block.link | setUrlDataFrom:data_from }}">{{ block.btn_text }}</a>
                </div>
              {% endif %}
            </div>
          </li>
        {% endfor %}
      </ul>
      <div class="swiper-pagination relative mt-[30px]" id="swiper-pagination-{{ blockId }}"></div>
    </div>
  </div>
</div>

<script>
  $(function () {
    let blocks = '{{ section.blocks.size }}'
    let options = {}
    if (blocks > '{{ data.yd_number }}') {
      options.pagination = {
        el: '#swiper-pagination-{{ blockId }}',
        clickable: true,
      }
    }
    if (moi.isMobile()) {
      let swiper = new Swiper('#swiper-{{ blockId }}', {
        slidesPerView: '{{ data.yd_number }}',
        spaceBetween: 30,
        autoHeight: true,
        ...options
      });

      $(`#swiper-{{blockId}} .swiper-slide`).each(function () {
        const element = this;
        const resizeObserver = new ResizeObserver((entries) => {
          for (const entry of entries) {
            swiper.update();
          }
        });
        resizeObserver.observe(element);
      });
    }
  });
</script>

{% schema %}
{
  "class": "block_image_text_list",
  "is_global": false,
  "icon": "icon-tuwenliebiao",
  "name": {
    "zh_CN": "图文列表",
    "en_US": "Image-text list"
  },
  "max_blocks": 20,
  "blocks": [
    {
      "name": {
        "zh_CN": "图文列表",
        "en_US": "Image-text list"
      },
      "type": "item",
      "settings": [
        {
          "type": "card_image",
          "label": {
            "zh_CN": "图片",
            "en_US": "Image"
          },
          "default": {
            "src": "",
            "alt": ""
          },
          "info": {
            "zh_CN": "建议宽度1000px以上，高度自适应",
            "en_US": "Recommended width more than 1000px, height adaptive"
          },
          "id": "image"
        },
        {
          "type": "card_input",
          "label": {
            "zh_CN": "标题",
            "en_US": "Title"
          },
          "id": "title",
          "default": "LOREM DE DORUS"
        },
        {
          "type": "card_text_editor",
          "label": {
            "zh_CN": "简短描述",
            "en_US": "Short description"
          },
          "id": "detail",
          "default": "Nullam aliquet vestibulum augue non varius. Cras cosmo congue an melitos. Dui del ante le maliquam. Praesent murna de tellus laoreet cosmopolis."
        },
        {
          "type": "card_input",
          "label": {
            "zh_CN": "按钮文字",
            "en_US": "Button text"
          },
          "id": "btn_text",
          "default": "Shop Now"
        },
        {
          "type": "card_page_link",
          "label": {
            "zh_CN": "跳转链接",
            "en_US": "Jump link"
          },
          "default": {
            "type": "",
            "title": "",
            "url": ""
          },
          "id": "link"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "Settings"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "default": "",
      "id": "block_title"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "描述",
        "en_US": "Description"
      },
      "id": "block_detail",
      "default": ""
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "宽度铺满",
        "en_US": "Spread the width"
      },
      "id": "is_fill",
      "default": "false"
    },
    {
      "type": "card_slider",
      "id": "pc_number",
      "max": "6",
      "min": "3",
      "label": {
        "zh_CN": "PC每排数量",
        "en_US": "PC number per row"
      },
      "default": "3"
    },
    {
      "type": "card_slider",
      "id": "yd_number",
      "max": "2",
      "min": "1",
      "label": {
        "zh_CN": "移动端每排数量",
        "en_US": "Number of mobile terminals per row"
      },
      "default": "2"
    },
    {
      "type": "card_input",
      "id": "more_text",
      "label": {
        "zh_CN": "查看更多文案",
        "en_US": "Text of view more"
      }
    },
    {
      "type": "card_page_link",
      "label": {
        "zh_CN": "查看更多链接",
        "en_US": "See more links"
      },
      "default": {
        "type": "",
        "title": "",
        "url": ""
      },
      "id": "more_link"
    },
    {
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		}
  ],
  "default": {
    "settings": {
      "block_title": "FEATURED ON ELLA",
      "block_detail": "",
      "is_fill": false,
      "pc_number": "3",
      "yd_number": "1",
      "more_text": "View All",
      "more_link": {
        "type": "",
        "title": "",
        "url": ""
      }
    },
    "blocks": [
      {
        "image": {
          "src": "",
          "alt": ""
        },
        "title": "LOREM DE DORUS",
        "detail": "Nullam aliquet vestibulum augue non varius. Cras cosmo congue an melitos. Dui del ante le maliquam. Praesent murna de tellus laoreet cosmopolis.",
        "btn_text": "Shop Now",
        "link": {
          "type": "",
          "title": "",
          "url": ""
        },
        "block_type": "item"
      },
      {
        "image": {
          "src": "",
          "alt": ""
        },
        "title": "LOREM DE DORUS",
        "detail": "Nullam aliquet vestibulum augue non varius. Cras cosmo congue an melitos. Dui del ante le maliquam. Praesent murna de tellus laoreet cosmopolis.",
        "btn_text": "Shop Now",
        "link": {
          "type": "",
          "title": "",
          "url": ""
        },
        "block_type": "item"
      },
      {
        "image": {
          "src": "",
          "alt": ""
        },
        "title": "LOREM DE DORUS",
        "detail": "Nullam aliquet vestibulum augue non varius. Cras cosmo congue an melitos. Dui del ante le maliquam. Praesent murna de tellus laoreet cosmopolis.",
        "btn_text": "Shop Now",
        "link": {
          "type": "",
          "title": "",
          "url": ""
        },
        "block_type": "item"
      }
    ]
  }
}
{% endschema %}
